<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Process Flow</title>
    <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="./assets/js/go.js"></script>
</head>
<body >

<div class="buttonGroup loading" hidden>
    <button class="v-btn info" data-index="big"><img src="assets/img/zoomin.png" /></button>
    <button class="v-btn info" data-index="small"><img src="assets/img/zoomout.png" /></button>
    <select id="theme">
        <option value="default">default</option>
        <option value="temp1">temp1</option>
    </select>
</div>

<div id="tips" class="loading" hidden>
    <div class="content">注释 : 灰色区域为无序工序组,工序不确定,但为流转串行。</div>
</div>

<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:100%;"></div>
</div>

<script src="./assets/js/require.js" charset="utf-8"></script>
<script>
    require.config({
        baseUrl:"./assets/",
        urlArgs:function(url,moduleName){
            return Math.random(); // "1.0.11"; //
        },
        map: {
            '*': {
                '$css': 'js/require.css'
            }
        }
    });

    require([
        "js/view",
        "js/index",
        "js/dialog",
        "$css!css/index"
    ],function(){
        $(".loading").removeAttr("hidden");
        $("body").on('click','[data-index]',function(e){
            var target = e.currentTarget;
            var type = target.getAttribute("data-index");
            if(!type){
                type = target.parentElement.getAttribute("data-index");
            }
            switch (type){
                case "big":{
                    myDiagram.scale += 0.1;
                }
                    break;
                case "small":{
                    if(myDiagram.scale>0.15){
                        myDiagram.scale -= 0.1;
                    }
                }
                    break;
                case "save":{
                    $.API.save();
                }
                    break;
                case "lock":{
                    var noLock = target.classList.contains("active");
                    if(noLock){
                        target.classList.remove("active");
                        target.querySelector("path").setAttribute("transform","matrix(1,0,0,1,0,0)");
                        myDiagram.isReadOnly = true;
                    }else{
                        target.classList.add("active");
                        target.querySelector("path").setAttribute("transform","matrix(1,0,0,1,0,-11)");
                        myDiagram.isReadOnly = false;
                    }
                }
                    break;
                default:
                    break;
            }
            //
            Dialog.hideTips();
        })

        $("#theme").on("change",'',function(){
            $.API.theme(this.value);
        })

        $(function(){
            $.API.init();
            $.API.load();
        })
    })
</script>
</body>
</html>
